
<!DOCTYPE html>
<html lang="en"xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>详细数据</title>
    <!-- Bootstrap CSS -->
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
    <!-- bootstrap theme -->
    <link th:href="@{/css/bootstrap-theme.css}" rel="stylesheet">
    <!--external css-->
    <!-- font icon -->
    <link th:href="@{/css/elegant-icons-style.css}" rel="stylesheet" />
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" />
    <!-- Custom styles -->
    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet" />

    <link rel="stylesheet" th:href="@{/css/pintuer.css}">
    <link rel="stylesheet" th:href="@{/css/admin.css}">
    <script th:src="@{/js/jquery.js}"></script>
    <script th:src="@{/js/pintuer.js}"></script>

    <script th:src="@{/js/html5shiv.js}"></script>

    <script th:src="@{/js/lte-ie7.js}"></script>


    <script th:src="@{https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js}"></script>
    <script th:src="@{http://code.jquery.com/jquery-2.1.4.min.js}"></script>

<body>
<div class="row">
    <!-- chart morris start -->
    <div class="col-lg-12">
        <section class="panel">
            <header class="panel-heading">
                <!--<h3>General Chart</Char>-->
                <h3>详细信息</h3>
            </header>
            <div class="panel-body">
                <div class="tab-pane" id="chartjs">
                    <div class="row">
                        <!-- Radar -->
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    昨日数据
                                </header>
                                <div class="panel-body text-center">
                                    <div id="container3" style="height: 300px ;width: 600px"></div>
                                </div>
                            </section>
                        </div>
                        <!-- Polar Area -->
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    上月数据
                                </header>
                                <div class="panel-body text-center">
                                    <div id="container4" style="height: 300px ;width: 550px"></div>
                                </div>
                            </section>
                        </div>
                    </div>

                    <div class="row">
                        <!-- 月 -->
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    <form>
                                        <div class="padding border-bottom">
                                            <ul class="search" style="padding-left: 10px;">
                                                <li><input class="input"disabled="disabled" value="按月份搜索" style="width: 95px;line-height: 20px;display: inline-block"></li>
                                                <li>
                                                    <input type="month" placeholder="请输入称重时间" th:name="time" class="input"
                                                           style="width: 250px;line-height: 17px;display: inline-block" />
                                                    <button type="button" class="button border-main icon-search" onclick="f1()">搜索</button>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </header>

                                <div class="panel-body text-center">
                                    <div id="container1" style="height: 300px ;width: 550px"></div>

                                </div>

                            </section>
                        </div>
                        <!-- 年-->
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    <form>
                                        <div class="padding border-bottom">
                                            <ul class="search" style="padding-left: 10px;">
                                                <li><input class="input"disabled="disabled" value="按年份搜索" style="width: 95px;line-height: 20px;display: inline-block"></li>
                                                <li>
                                                    <select th:name="time" class="form-control" style="width: 250px;line-height: 50px;display: inline-block">
                                                        <option th:value="2021">2021</option>
                                                        <option th:value="2020">2020</option>
                                                        <option th:value="2019">2019</option>
                                                    </select>
                                                </li>


                                                <li>
                                                    <button type="button" class="button border-main icon-search" onclick="f2()">搜索</button>
                                                </li>
                                            </ul>
                                        </div>
                                    </form>
                                </header>

                                <div class="panel-body text-center">
                                    <div id="container2" style="height: 300px ;width: 550px"></div>

                                </div>

                            </section>
                        </div>
                    </div>

                   <!-- <div class="row">

                        &lt;!&ndash; Pie &ndash;&gt;
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    Pie
                                </header>
                                <div class="panel-body text-center">

                                </div>
                            </section>
                        </div>
                         Doughnut
                        <div class="col-lg-6">
                            <section class="panel">
                                <header class="panel-heading">
                                    Doughnut
                                </header>
                                <div class="panel-body text-center">

                                </div>
                            </section>
                        </div>
                    </div>-->
                </div>
            </div>
        </section>
    </div>
    <!-- chart morris start -->
</div>
<script src="jquery/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>


<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js}"></script>
<script>
    function f1() {
        var myfrm = document.forms;
        var myloginform = myfrm[0];
        var t2 =myloginform.elements[1].value;
        var y="http://localhost:8081/barVOListByMonth/"+t2;
        $(function(){
            var myCharts=echarts.init(document.getElementById('container1'));
            myCharts.setOption({
                // color: ['#3398DB'],
                //设置标题
                title:{
                    text:'该月每天的总重量',
                    left: 'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            //坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线
                    }
                },
                /* legend: {
                     data: ['货物']
                 },*/
                xAxis : {
                    data : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13',
                        '14', '15', '16', '17','18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28','29','30','31'],
                    name:'月份',
                    type: 'category',
                },
                yAxis : {
                    type: 'value',
                    name:'总重量（kg）'
                },
                series : [
                    {
                        type:'line',
                        data:[],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            //加载时显示loading动画
            myCharts.showLoading();
            //放x轴值得姓名的数组
            //var name=[];

            //放y轴值得货物数量的数组
            var value1=[];
            /* var  y = document.getElementsByName("time").value;
             var y1 = "http://localhost:8081/barVOListByYear"+y;*/
            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url: y,    //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    var a=data.values;
                    $(a).each(function(i,e){
                        // name.push(e.names);    //取出姓名并存入数组
                        value1.push(e);     //取出货物数量并存入数组
                    });


                    myCharts.hideLoading();    //隐藏加载动画
                    myCharts.setOption({        //加载数据图表
                        xAxis: {
                            data:['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13',
                                '14', '15', '16', '17','18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28','29','30','31']
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '总重量（kg）',
                            type:'line',
                            // barWidth: '60%',
                            data: value1,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                            /*itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }*/

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myCharts.hideLoading();
                }
            })
        });
    }

    $(function(){
        var myCharts=echarts.init(document.getElementById('container1'));
        myCharts.setOption({
            // color: ['#3398DB'],
            //设置标题
            title:{
                text:'该月每天的总重量',
                left: 'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            //坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线
                }
            },
            /* legend: {
                 data: ['货物']
             },*/
            xAxis : {
                data : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13',
                    '14', '15', '16', '17','18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28','29','30','31'],
                name:'月份',
                type: 'category',
            },
            yAxis : {
                type: 'value',
                name:'总重量（kg）'
            },
            series : [
                {
                    type:'line',
                    data:[],
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        });

        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值得姓名的数组
        //var name=[];

        //放y轴值得货物数量的数组
        var value1=[];

        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url: "http://localhost:8081/barVOListByMonth/",    //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var a=data.values;
                $(a).each(function(i,e){
                    // name.push(e.names);    //取出姓名并存入数组
                    value1.push(e);     //取出货物数量并存入数组
                });


                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    xAxis: {
                        data:['1', '2', '3', '4', '5', '6', '7','8', '9', '10','11','12','13',
                            '14', '15', '16', '17','18', '19', '20', '21', '22', '23', '24', '25', '26', '27','28','29','30','31']
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '总重量（kg）',
                        type:'line',
                        // barWidth: '60%',
                        data: value1,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                        /*itemStyle: {
                            normal: {
                                label: {
                                    show: true,       //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {      //数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
                        }*/

                    }]
                });
            },
            /* error: function (errorMsg) {
                 //请求失败时执行该函数
                 alert("图表请求数据失败!");
                 myCharts.hideLoading();
             }*/
        })
    });


    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener("resize", function () {
        myChart.resize();
    });

</script>

<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js}"></script>
<script>
    function f2() {
        var myfrm = document.forms;
        var myloginform = myfrm[1];
        var t2 =myloginform.elements[1].value;
        //alert(t2);
        var y="http://localhost:8081/barVOListByYear/"+t2;
        $(function(){
            var myCharts=echarts.init(document.getElementById('container2'));
            myCharts.setOption({
                // color: ['#3398DB'],
                //设置标题
                title:{
                    text:'该年每月的总重量',
                    left: 'center'
                },
                tooltip : {
                    trigger: 'axis',
                    axisPointer : {            //坐标轴指示器，坐标轴触发有效
                        type : 'shadow'        // 默认为直线
                    }
                },
                /* legend: {
                     data: ['货物']
                 },*/
                xAxis : {
                    data : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
                    name:'月份',
                    type: 'category',
                },
                yAxis : {
                    type: 'value',
                    name:'总重量（kg）'
                },
                series : [
                    {
                        type:'bar',
                        data:[],
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                    }
                ]
            });

            //加载时显示loading动画
            myCharts.showLoading();
            //放x轴值得姓名的数组
            //var name=[];

            //放y轴值得货物数量的数组
            var value1=[];

            //利用ajax从后台给数组存值
            $.ajax({
                type: "get",
                url:y,    //请求发送到Controller list处
                dataType: "json",        //返回数据形式为json
                success: function (data) {
                    //请求成功时执行该函数内容，result即为服务器返回的json对象
                    var a=data.values;
                    $(a).each(function(i,e){
                        // name.push(e.names);    //取出姓名并存入数组
                        value1.push(e);     //取出货物数量并存入数组
                    });


                    myCharts.hideLoading();    //隐藏加载动画
                    myCharts.setOption({        //加载数据图表
                        xAxis: {
                            data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
                        },
                        series: [{
                            // 根据名字对应到相应的系列
                            name: '总重量（kg）',
                            type:'bar',
                            // barWidth: '60%',
                            data: value1,
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                            /*itemStyle: {
                                normal: {
                                    label: {
                                        show: true,       //开启显示
                                        position: 'top',  //在上方显示
                                        textStyle: {      //数值样式
                                            color: 'black',
                                            fontSize: 12
                                        }
                                    }
                                }
                            }*/

                        }]
                    });
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert("图表请求数据失败!");
                    myCharts.hideLoading();
                }
            })
        });
    }
    var myfrm = document.forms;
    var myloginform = myfrm[1];
    var t2 =myloginform.elements[1].value;
    //alert(t2);
    var y="http://localhost:8081/barVOListByYear/"+t2;
    $(function(){
        var myCharts=echarts.init(document.getElementById('container2'));
        myCharts.setOption({
            // color: ['#3398DB'],
            //设置标题
            title:{
                text:'该年每月的总重量',
                left: 'center'
            },
            tooltip : {
                trigger: 'axis',
                axisPointer : {            //坐标轴指示器，坐标轴触发有效
                    type : 'shadow'        // 默认为直线
                }
            },
            /* legend: {
                 data: ['货物']
             },*/
            xAxis : {
                data : ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
                name:'月份',
                type: 'category',
            },
            yAxis : {
                type: 'value',
                name:'总重量（kg）'
            },
            series : [
                {
                    type:'bar',
                    data:[],
                    showBackground: true,
                    backgroundStyle: {
                        color: 'rgba(180, 180, 180, 0.2)'
                    }
                }
            ]
        });

        //加载时显示loading动画
        myCharts.showLoading();
        //放x轴值得姓名的数组
        //var name=[];

        //放y轴值得货物数量的数组
        var value1=[];

        //利用ajax从后台给数组存值
        $.ajax({
            type: "get",
            url:y,    //请求发送到Controller list处
            dataType: "json",        //返回数据形式为json
            success: function (data) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                var a=data.values;
                $(a).each(function(i,e){
                    // name.push(e.names);    //取出姓名并存入数组
                    value1.push(e);     //取出货物数量并存入数组
                });


                myCharts.hideLoading();    //隐藏加载动画
                myCharts.setOption({        //加载数据图表
                    xAxis: {
                        data: ['1', '2', '3', '4', '5', '6', '7','8', '9', '10', '11', '12'],
                    },
                    series: [{
                        // 根据名字对应到相应的系列
                        name: '总重量（kg）',
                        type:'bar',
                        // barWidth: '60%',
                        data: value1,
                        showBackground: true,
                        backgroundStyle: {
                            color: 'rgba(180, 180, 180, 0.2)'
                        }
                        /*itemStyle: {
                            normal: {
                                label: {
                                    show: true,       //开启显示
                                    position: 'top',  //在上方显示
                                    textStyle: {      //数值样式
                                        color: 'black',
                                        fontSize: 12
                                    }
                                }
                            }
                        }*/

                    }]
                });
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myCharts.hideLoading();
            }
        })
    });



    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener("resize", function () {
        myChart.resize();
    });

</script>

<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js}"></script>
<script type="text/javascript">
    /*var dom = document.getElementById("container3");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    option = {
        title: {
            text: '昨天各个仓库称重总量（kg）',
            //subtext: '5个仓库',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            orient: 'vertical',
            left: 'left',
        },
        series: [
            {
                name: '数据来源',
                type: 'pie',
                radius: '50%',
                data: [
                    {value: 1048, name: '1号仓库'},
                    {value: 735, name: '2号仓库'},
                    {value: 580, name: '3号仓库'},
                    {value: 484, name: '4号仓库'},
                    {value: 300, name: '5号仓库'}
                ],
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };*/
    $(function() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container3'));
        // 指定图表的配置项和数据
        var names=[];
        var values=[];
        var datas=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "http://localhost:8081/barVOListByDay",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].names);
                        values.push(result[i].values);
                        var e ="{"+"value: "+result[i].values+","+"name: "+result[i].names+"}";
                        datas.push(e);
                    }
                  //  alert(datas);
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption(
                        {
                            title: {
                                text: '昨日仓库称重总量（kg）',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                orient: 'vertical',
                                left: 'left',
                                //data: names
                            },
                            series: [
                                {
                                    name: '数据来源',
                                    type: 'pie',
                                    radius: '50%',
                                    //center: ['50%', '60%'],
                                    data: [
                                        {value: result[0].values, name: '1号仓库'},
                                        {value: result[1].values, name: '2号仓库'},
                                        {value: result[2].values, name: '3号仓库'},
                                        {value: result[3].values, name: '4号仓库'},
                                        {value: result[4].values, name: '5号仓库'}
                                    ],
                                    emphasis:{
                                        itemStyle: {
                                            emphasis: {
                                                shadowBlur: 10,
                                                shadowOffsetX: 0,
                                                shadowColor: 'rgba(0, 0, 0, 0.5)'
                                            }
                                        }
                                    }

                                }
                            ]
                        }
                    );
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener("resize", function () {
        myChart.resize();
    });

</script>

<script type="text/javascript" th:src="@{https://cdn.jsdelivr.net/npm/echarts@5/dist/echarts.min.js}"></script>
<script type="text/javascript">
    /*var dom = document.getElementById("container4");
    var myChart = echarts.init(dom);
    var app = {};

    var option;



    option = {
        title: {
            text: '上个月各个仓库称重总量（kg）',
            //subtext: '5个仓库',
            left: 'center'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            top: 'bottom'
        },
        toolbox: {
            show: true,
            feature: {
                mark: {show: true},
                dataView: {show: true, readOnly: false},
                restore: {show: true},
                saveAsImage: {show: true}
            }
        },
        series: [
            {
                name: '数据来源',
                type: 'pie',
                radius: [30, 100],
                center: ['50%', '50%'],
                roseType: 'area',
                itemStyle: {
                    borderRadius: 5
                },
                data: [
                    {value: 40, name: '1号仓库'},
                    {value: 38, name: '2号仓库'},
                    {value: 32, name: '3号仓库'},
                    {value: 30, name: '4号仓库'},
                    {value: 28, name: '5号仓库'}
                ]
            }
        ]
    };*/

    $(function() {

        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('container4'));
        // 指定图表的配置项和数据
        var names=[];
        var values=[];
        var datas=[];
        //数据加载完之前先显示一段简单的loading动画
        myChart.showLoading();
        $.ajax({
            type : "post",
            async : true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url : "http://localhost:8081/barVOListByLastMonth",    //请求发送到dataActiont处
            data : {},
            dataType : "json",        //返回数据形式为json
            success : function(result) {
                //请求成功时执行该函数内容，result即为服务器返回的json对象
                if (result) {
                    for(var i=0;i<result.length;i++){
                        names.push(result[i].names);
                        values.push(result[i].values);
                        var e ="{"+"value: "+result[i].values+","+"name: "+result[i].names+"}";
                        datas.push(e);
                    }
                    //  alert(datas);
                    myChart.hideLoading();    //隐藏加载动画
                    myChart.setOption(
                        {
                            title: {
                                text: '上月仓库称重总量（kg）',
                                left: 'center'
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: "{a} <br/>{b} : {c} ({d}%)"
                            },
                            legend: {
                                top: 'bottom'
                                //data: names
                            },
                            toolbox: {
                                show: true,
                                feature: {
                                    mark: {show: true},
                                    dataView: {show: true, readOnly: false},
                                    restore: {show: true},
                                    saveAsImage: {show: true}
                                }
                            },
                            series: [
                                {
                                    name: '数据来源',
                                    type: 'pie',
                                    radius: [30, 100],
                                    center: ['50%', '50%'],
                                    roseType: 'area',
                                    itemStyle: {
                                        borderRadius: 5
                                    },
                                    data: [
                                        {value: result[0].values, name: '1号仓库'},
                                        {value: result[1].values, name: '2号仓库'},
                                        {value: result[2].values, name: '3号仓库'},
                                        {value: result[3].values, name: '4号仓库'},
                                        {value: result[4].values, name: '5号仓库'}
                                    ],


                                }
                            ]
                        }
                    );
                }
            },
            error : function(errorMsg) {
                //请求失败时执行该函数
                alert("图表请求数据失败!");
                myChart.hideLoading();
            }
        });//end ajax

    });//刷新方法结束

    if (option && typeof option === 'object') {
        myChart.setOption(option);
    }
    window.addEventListener("resize", function () {
        myChart.resize();
    });

</script>
</body>
</html>